<template>
    <div>
        <my-header></my-header>
        <div class="user_info">
            <img class="user_imge" src='../../assets/userImge.jpg'>
            <div class="info_item">
                <span class="info_item_font">账号：</span>
                <div class="info_item_input info_item_box">{{userId}}</div>
            </div>
            <div class="info_item">
                <span class="info_item_font">余额:</span>
                <div class="info_item_input info_item_box">{{userMoney}}元</div>
                <Icon style="margin-left: 20px; cursor: pointer;" size="33" @click="rechargePage=true" type="ios-add-circle-outline" />
            </div>
            <div class="info_item">
                <span class="info_item_font">用户名：</span>
                <div class="info_item_input info_item_box">{{userName}}</div>
            </div>
            <div class="info_item">
                <span class="info_item_font">银行卡：</span>
                <div class="info_item_input info_item_box">{{bankCard}}</div>
            </div>
            <div class="info_item">
                <span class="info_item_font">密码：</span>
                <input ref='pw' readonly type="password" class="info_item_input"  v-model="userId"/>
            </div>
            <span class="switch_pw" v-if="showPassword" @click="switchPassword()">隐藏密码</span>
            <span class="switch_pw" v-else @click="switchPassword()">显示密码</span>
            <Button shape='circle' size="large" class="btn" type="warning" @click="changeInfo()">修改信息</Button>
        </div>
        <Modal
            :styles="{top: '400px'}"
            v-model="isChangeInfo"
            title="修改信息"
            loading
            @on-ok="submission()">
            <span class="change_item_font">用户名：</span><Input v-model="newName" size="large"/>
            <span class="change_item_font">银行卡：</span><Input v-model="newCard" size="large"/>
            <span class="change_item_font">密码：</span><Input v-model="newPassword" size="large"/>
        </Modal>
        <Modal
            :styles="{top: '400px'}"
            v-model="rechargePage"
            title="账户充值"
            loading
            @on-ok="recharge()">
            <div class="btn_box">
                <Button class="recharge_btn" @click="rechargeCount=50" shape='circle' size='large' type="dashed">50</Button>
                <Button class="recharge_btn" @click="rechargeCount=100" shape='circle' size='large' type="dashed">100</Button><br>
                <Button class="recharge_btn" @click="rechargeCount=500" shape='circle' size='large' type="dashed">500</Button>
                <Button class="recharge_btn" @click="rechargeCount=1000" shape='circle' size='large' type="dashed">1000</Button>
            </div>
            
        </Modal>
        <my-footer></my-footer>
    </div>
</template>

<script>
import myFooter from '../../components/footer'
import myHeader from '../../components/header'
export default {
    components: { 
        myHeader,
        myFooter 
    },
    data() {
        return {
            userName: 'dasdsad',
            userId: 'dsadas',
            bankCard: 1123446456,
            password: 'dasdasd',
            userMoney: 111,
            showPassword: false,
            isChangeInfo: false,
            newName: 'dasds',
            newCard: 321312,
            newPassword: 'dasdsadsa',
            rechargePage: false,
            rechargeCount: 0,
        }
    },
    methods: {
        switchPassword() {
            this.showPassword = !this.showPassword;
            if(this.showPassword) {
                this.$refs.pw.type = 'text';
            } else {
                this.$refs.pw.type = 'password';
            }
        },
        changeInfo() {
            this.isChangeInfo = true;
        },
        submission() {

        },
        recharge() {

        }
    }
}
</script>

<style scoped>
.user_info{
    width: 600px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 140px;
    border: 1px solid rgb(168, 166, 166);
    box-shadow: 5px 5px 5px #888888;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.user_imge{
    width: 200px;
    height: 220px;
    margin-bottom: -10px;
}
.info_item{
    margin-top: 40px;
    width: 450px;
    display: flex;
    height: 36px;
    margin-left: -60px;
}
.info_item_box{
    border: 1px solid rgb(169, 169, 169);
}
.info_item_font{
    width: 100px;
    font-size: 24px;
    line-height: 36px;
    text-align: justify;
}
.info_item_input{
    width: 300px;
    outline: none;
    font-size: 20px;
    text-align: center;
    cursor: default;
}
.switch_pw{
    margin-top: 10px;
    font-size: 16px;
    color: rgb(139, 134, 134);
    margin-left: 22 0px;
    cursor: pointer;
}
.btn{
    margin-top: 20px;
    width: 100px;
}
.change_item_font{
    font-size: 19px;
    line-height: 40px;
}
.btn_box{
    width: 100%;
    text-align: center;
}
.recharge_btn{
    width: 170px;
    height: 80px;
    font-size: 25px;
    margin: 20px;
}
</style>

